<template>
  <div class="home-box">
    <el-container class="home-container">
      <el-aside class="aside-box">
        <!-- <div class="title-box"><img :src="platformLogo" alt=""></div> -->
        <div class="title-box">{{ platformName }}</div>
        <!-- <div class="select-box">
          <el-select size="small" v-model="onOffLineMenu" @change="onOffChange">
            <el-option v-for="item in onOffOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div> -->
        <el-menu ref="menu" :default-active="activeMenu" class="el-menu-vertical menu-box" :collapse-transition="true"
          background-color="#1d232d" text-color="#777b81" active-text-color="#ffffff" unique-opened :router="true">
          <template v-for="item in menuList">
            <!-- 有子集 -->
            <el-sub-menu :index="item.perms" :key="item.perms"
              v-if="item.children.length > 0 && item.type < 100 && isShowMenu(item.menuTag)" class="padding-l">
              <template #title>
                <!-- <el-icon v-html="item.icon"></el-icon> -->
                <span :title="item.name">{{ item.name }}</span>
                <span class="badge" v-show="item.badge">{{ item.badge }}</span>
              </template>

              <!-- 有二级子集 -->
              <template v-for="subItem in item.children">
                <el-sub-menu :key="subItem.perms" :index="subItem.perms"
                  v-if="subItem.children.length > 0 && item.type < 100 && isShowMenu(subItem.menuTag)">
                  <template #title>
                    <span>{{ subItem.name }}</span>
                  </template>

                  <!-- 三级 -->
                  <template v-for="thrItem in subItem.children">
                    <el-menu-item :key="thrItem.perms" :index="thrItem.perms"
                      v-if="thrItem.isShow && item.type < 100 && isShowMenu(thrItem.menuTag)">
                      {{ thrItem.name }}
                    </el-menu-item>
                  </template>
                </el-sub-menu>
              </template>

              <!-- 无二级子集 -->
              <template v-for="subItem in item.children">
                <el-menu-item :key="subItem.perms" :index="subItem.perms"
                  v-if="subItem.children.length == 0 && item.type < 100 && isShowMenu(subItem.menuTag)">
                  <span style="margin-left:20px;">{{ subItem.name }}</span>
                  <span class="badge" v-show="subItem.badge">{{
                subItem.badge
                }}</span>
                </el-menu-item>
              </template>
            </el-sub-menu>

            <!-- 无子集 -->
            <el-menu-item :key="item.perms" :index="item.perms"
              v-if="item.children.length == 0 && item.type < 100 && isShowMenu(item.menuTag)">
              <!-- <el-icon v-html="item.icon"></el-icon> -->
              <span>{{ item.name }}</span>
            </el-menu-item>

          </template>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="header-box">
          <el-breadcrumb separator-icon="ArrowRight">
            <el-breadcrumb-item v-for="item in breadList" :key="item" :to="{path:item.path}">{{ item.name }}</el-breadcrumb-item>
          </el-breadcrumb>
          <!-- <div class="header-icon-box">
            <el-popover placement="bottom" :width="200" trigger="click">
              <template #reference>
                <div>
                  <img class="unactive" src="@a/icons/service.png" alt="">
                  <img class="active" src="@a/icons/service-active.png" alt="">
                  <span>客服</span>
                </div>
              </template>
              <div class="pop-box">
                <div>微信扫码咨询{{ serviceName || '' }}客服</div>
                <div><img style="width:100%" src="@/assets/imgs/u77.png" alt=""></div>
                <div v-show="servicePhone">客服联系电话：{{ servicePhone }}</div>
              </div>
            </el-popover>
            <div @click="toHelp">
              <img class="unactive" src="@a/icons/help.png" alt="">
              <img class="active" src="@a/icons/help-active.png" alt="">
              <span>帮助</span>
            </div>
            <div @click="toMsgMng">
              <img class="unactive" src="@a/icons/msg.png" alt="">
              <img class="active" src="@a/icons/msg-active.png" alt="">
              <el-badge :hidden="msgnoReadForm.count == 0" :value="msgnoReadForm.count">
                <span>消息</span>
              </el-badge>
            </div>
          </div> -->
          <div class="head-portrait" style="margin-left:auto;">
            <el-avatar icon="UserFilled" />
            <el-dropdown trigger="click" @command="handleCommand">
              <span class="el-dropdown-link">
                欢迎您 {{ (userInfo && userInfo.name) || '' }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <!-- <el-dropdown-item>Action 1</el-dropdown-item> -->
                  <el-dropdown-item command="editpassword">修改密码</el-dropdown-item>
                  <el-dropdown-item command="editpass">修改手机号</el-dropdown-item>
                  <el-dropdown-item command="outLogin">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main class="main-box">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { computed, onBeforeUnmount, onMounted, reactive, toRefs, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { warningDeal } from '@/utils/utils'
import { useStateStore } from '@/store'
import api from './api'
export default {
  setup() {
    const route = useRoute()
    const router = useRouter()
    const store = useStateStore()

    const state = reactive({
      platformName: computed(() => {
        return store.getPlatformName
      }),
      platformLogo: computed(() => {
        return store.getPlatformLogo
      }),
      msgnoReadForm: computed(() => {
        return store.msgnoReadForm
      }),
      msgRefreshTime: computed(() => {
        return store.getMsgRefreshTime
      }),
      servicePhone: computed(() => {
        return store.getServicePhone
      }),
      serviceName: computed(() => {
        return store.getServiceName
      }),
      onOffOptions: computed(() => {
        return store.getOnOffOptions
      }),
      activeMenu: '/welcome',
      breadList: [],
      menuList: [
        {
          name: '首页',
          perms: '/welcome',
          type: 1,
          children: [],
        },
        {
          name: '平台管理员',
          perms: '/myStore',
          type: 1,
          children: [
            {
              name: '管理员',
              perms: '/employeesMng',
              type: 1,
              children: [],
            },
            {
              name: '角色权限',
              perms: '/jobsMng',
              type: 1,
              children: [],
            },
          ],
        },
        {
          name: '商户管理',
          perms: '/storeInfo',
          type: 1,
          children: [],
        },
        {
          name: '商品管理',
          perms: '/goodsMng',
          type: 1,
          children: [
            {
              name: '商品属性管理',
              perms: '/goodsTypeMng',
              type: 1,
              children: [],
            },
            {
              name: '商品管理',
              perms: '/goods',
              type: 1,
              children: [],
            },
          ],
        },
        {
          name: '生产接口管理',
          perms: '/prodApi',
          type: 1,
          children: [],
        },
        {
          name: '分销接口管理',
          perms: '/distApi',
          type: 1,
          children: [],
        },
        {
          name: '订单管理',
          perms: '/orderMng',
          type: 1,
          children: [
            {
              name: '代理订单',
              perms: '/orderMng/dlOrder',
              type: 1,
              children: [],
            },
            {
              name: '分销订单',
              perms: '/orderMng/fxOrder',
              type: 1,
              children: [],
            },
            {
              name: '手动生产订单',
              perms: '/orderMng/sdOrder',
              type: 1,
              children: [],
            },
          ],
        },
        {
          name: '系统消息',
          perms: '/msgMng',
          type: 1,
          children: [],
        },
      ],
      menuIds: [],
      userInfo: {},
      myTimer: null,
      onOffLineMenu: null,
    })

    watch(() => route.matched, (newVal, oldVal) => {
      setBreadAndActive()
    })

    // 设置面包屑和菜单选中
    function setBreadAndActive() {
      const myArr = []
      const routeList = route.matched[route.matched.length - 1].path.split('/')
      state.activeMenu = '/' + routeList[1]
      route.matched.map(item => {
        if (item.path == '/home') return
        myArr.push(item)
      })
      state.breadList = myArr
    }

    function handleCommand(command) {
      switch (command) {
        case 'outLogin':
          router.push({ path: '/' })
          api.companyQuit().then(res => {
            console.log(res)
          }).catch(err => {
            console.log(err)
          })
          break
        case 'editpass':
          router.push({ path: '/changePass' })
          break
        case 'editpassword':
          router.push({ path: '/editPass' })
          break
      }
    }

    function getnewMessageCount() {
      api.newMessageCount().then(res => {
        if (res.code == '200') {
          store.setMsgnoReadForm(res.data)
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function toMsgMng() {
      router.push({ path: '/msgMng' })
    }

    function toHelp() {
      window.open('https://jihehao.yilianyun.top/distribution/help.html', '_blank')
    }

    function tabRecursive(list) {
      list && list.map(item => {
        state.menuIds.push(item.menuId)
        if (item.children && item.children.length > 0) {
          tabRecursive(item.children)
        }
      })
    }

    function isShowMenu(list) {
      return true
      let isShow = false
      if (state.onOffLineMenu && state.onOffLineMenu != 'all') {
        isShow = !list || list.includes(state.onOffLineMenu)
      } else {
        isShow = true
      }
      return isShow
    }

    function onOffChange(e) {
      window.localStorage.setItem('onOffLineMenu', e)
    }

    onMounted(() => {
      state.menuIds = []
      const myMenuList = window.localStorage.getItem('USER_MENU')
      state.menuList = JSON.parse(myMenuList)
      state.userInfo = JSON.parse(window.localStorage.getItem('USER_INFO'))
      tabRecursive(state.menuList)
      store.setMenuIds(state.menuIds)
      setBreadAndActive()
      window.addEventListener('storage', event => {
        if (event.key === 'USER_INFO') {
          state.userInfo = JSON.parse(event.newValue)
        }
      })
      // getnewMessageCount()
      // clearInterval(state.myTimer)
      // state.myTimer = setInterval(() => {
      //   getnewMessageCount()
      // }, state.msgRefreshTime);
      state.onOffLineMenu = window.localStorage.getItem('onOffLineMenu')
    })

    onBeforeUnmount(() => {
      // clearInterval(state.myTimer)
    })

    return {
      ...toRefs(state),
      handleCommand,
      toMsgMng,
      toHelp,
      isShowMenu,
      onOffChange,
    }
  }
}
</script>

<style lang="scss" scoped>
.home-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .home-container {
    width: 100%;
    height: 100%;
  }
}
.title-box {
  text-align: center;
  color: #dddee0;
  background-color: #1d232d;
  font-weight: bold;
  font-size: 18px;
  box-sizing: border-box;
  padding: 20px 0;
  > img {
    width: 80%;
  }
}
:deep(.el-menu) {
  flex-grow: 1;
  border-right: none;
  .el-menu-item {
    height: 40px;
    padding: 0 !important;
    padding-left: 30px !important;
    &:hover {
      background-color: #44a5ff !important;
      color: #ffffff !important;
    }
  }
  .el-sub-menu__title {
    padding: 0 !important;
    padding-left: 30px !important;
  }
  .el-menu--inline {
    background-color: #14171e !important;
  }
  .is-active {
    .el-sub-menu__title {
      background-color: #1d232d !important;
    }
    &:not(.el-sub-menu__title) {
      color: #ffffff !important;
      background-color: #0081ff !important;
    }
  }
}
.aside-box {
  width: 200px;
  display: flex;
  flex-flow: column;
}
.header-box {
  display: flex;
  align-items: center;
  .header-icon-box {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    > div {
      display: flex;
      align-items: center;
      color: #737373;
      font-size: 14px;
      gap: 3px;
      cursor: pointer;
      > img {
        height: 16px;
      }
      &:hover {
        color: #0081ff;
        > .unactive {
          display: none;
        }
        > .active {
          display: block;
        }
      }
      .unactive {
        display: block;
      }
      .active {
        display: none;
      }
    }
  }
  .head-portrait {
    margin-left: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
}
.main-box {
  background-color: #f1f4f7;
}
.pop-box {
  width: 100%;
  text-align: center;
  font-size: 12px;
}
.select-box {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px 10px 20px;
  background-color: #1d232d;
  :deep(.el-input__wrapper) {
    box-shadow: none !important;
    background-color: #14171e !important;
  }
}
</style>